<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    //宏任务： script    setTimeout    setInterval   setImmediate   I/O    UI render 
    //微任务： promise    Object.observe     MutationObserver
    //任务优先级：process.next>promise.then>setTimeout>setImmediate


    // 我们创建了 promise 但不能同步等待它执行完成。
    // 我们只能通过 then 传一个回调函数这样很容易再次陷入 promise 的回调地狱。
    // 实际上，async/await 在底层转换成了 promise 和 then 回调函数。
    // 也就是说，这是 promise 的语法糖。每次我们使用 await,
    // 解释器都创建一个 promise 对象，然后把剩下的 async 函数中的操作放到
    // then 回调函数中。async/await 的实现，离不开 Promise。从字面意思来理解，
    // async 是“异步”的简写，而 await 是 async wait 的简写
    // 可以认为是等待异步方法执行完成。


    // async function a() {
    //   console.log('a')
    //   await b()
    //   console.log('a end')
    // }
    // async function b() {
    //   console.log('b')
    // }
    // a()
    // setTimeout(function () {
    //   console.log('setTimeout')
    // }, 0)
    // new Promise(function (resolve, reject) {
    //   console.log('promise')
    //   resolve()
    // }).then(function () {
    //   console.log('then')
    // })
    // console.log('main end')
    // a   b   promise   mainend   aend  then  setTimeout




    // setTimeout(function () {
    //   console.log('8')
    // }, 0)
    // async function async1() {
    //   console.log('1')
    //   const data = await async2()
    //   console.log('6')
    //   return data
    // }
    // async function async2() {
    //   return new Promise(resolve => {
    //     console.log('2')
    //     resolve('async2的结果')
    //   }).then(data => {
    //     console.log('4')
    //     return data
    //   })
    // }
    // async1().then(data => {
    //   console.log('7')
    //   console.log(data)
    // })
    // new Promise(function (resolve) {
    //   console.log('3')
    //   resolve()
    // }).then(function () {
    //   console.log('5')
    // })

    // 1  2  3   4  5   6  7   ''   8






    // async function async1() {
    //   console.log('async1 start');
    //   await async2();
    //   console.log('async1 end');
    // }
    // async function async2() {
    //   console.log('async2');
    // }

    // console.log('script start');

    // setTimeout(function () {
    //   console.log('setTimeout');
    // }, 0)

    // async1();

    // new Promise(function (resolve) {
    //   console.log('promise1');
    //   resolve();
    // }).then(function () {
    //   console.log('promise2');
    // });
    // console.log('script end');

    // start   async1start    async2   promise1    end   async1end    promise2  setTimeout





    // new Promise(resolve => {
    //   resolve(1);

    //   Promise.resolve().then(() => {
    //     // t2
    //     console.log(2)
    //   });
    //   console.log(4)
    // }).then(t => {
    //   // t1
    //   console.log(t)
    // });
    // console.log(3);

    // 4   3    2    1  



    // async function async1() {
    //   console.log('async1 start');
    //   await async2();
    //   console.log('async1 end');  
    // }
    // async function async2() {
    //   new Promise(function (resolve) {
    //     console.log('promise1');
    //     resolve();
    //   }).then(function () {           
    //     console.log('promise2');
    //   });
    // }
    // console.log('script start');

    // setTimeout(function () {
    //   console.log('setTimeout');
    // }, 0)
    // async1();

    // new Promise(function (resolve) {
    //   console.log('promise3');
    //   resolve();
    // }).then(function () {   
    //   console.log('promise4');
    // });

    // console.log('script end');

    // scriptstart   async1start  promise1     promise3    scriptend
    // promise2    async1end  promise4     setTimeout





    // async function async1() {
    //   console.log('async1 start');
    //   await async2();
    //   //更改如下：
    //   setTimeout(function () {
    //     console.log('setTimeout1')
    //   }, 0)
    // }
    // async function async2() {
    //   //更改如下：
    //   setTimeout(function () {
    //     console.log('setTimeout2')
    //   }, 0)
    // }
    // console.log('script start');

    // setTimeout(function () {
    //   console.log('setTimeout3');
    // }, 0)
    // async1();

    // new Promise(function (resolve) {
    //   console.log('promise1');
    //   resolve();
    // }).then(function () {
    //   console.log('promise2');
    // });
    // console.log('script end');

    // script start   async1 start  promise1  scriptend
    //promise2 setTimeout3   setTimeout2   setTimeout1






    // async function async1() {
    //   console.log('async1 start');
    //   await async2();
    //   console.log('async1 end'); // 不需要等async2完成后再，加入微任务队列。会在async2的委任务加入后，尾随加入
    // }
    // async function async2() {
    //   new Promise(function (resolve) {
    //     console.log('promise1');
    //     resolve();
    //   }).then(function () {
    //     setTimeout(function () { console.log('promise2'); }, 0)
    //   });
    // }
    // console.log('script start');

    // setTimeout(function () {
    //   console.log('setTimeout');
    // }, 0)
    // async1();

    // new Promise(function (resolve) {
    //   console.log('promise3');
    //   resolve();
    // }).then(function () {
    //   console.log('promise4');
    // });

    // console.log('script end');

    // scriptstart   async1start  promise1     promise3    scriptend
    //     async1end  promise4     setTimeout  promise2




    // async function a1() {
    //   console.log('a1 start')
    //   await a2()
    //   console.log('a1 end')
    // }
    // async function a2() {
    //   console.log('a2')
    // }
    // console.log('script start')
    // setTimeout(() => {
    //   console.log('setTimeout')
    // }, 0)
    // Promise.resolve().then(() => {
    //   console.log('promise1')
    // })
    // a1()
    // let promise2 = new Promise((resolve) => {
    //   resolve('promise2.then')
    //   console.log('promise2')
    // })
    // promise2.then((res) => {
    //   console.log(res)
    //   Promise.resolve().then(() => {
    //     console.log('promise3')
    //   })
    // })
    // console.log('script end')

    // scriptstart   a1start     a2     promise2     script end
    // promise1    a1 end    promise2.then    promise3
    //setTimeout


    // async function a1() {
    //   console.log('a1 start')
    //   await a2()
    //   console.log('a1 end')
    // }
    // async function a2() {
    //   console.log('a2')
    // }
    // console.log('script start')
    // setTimeout(() => {
    //   console.log('setTimeout')
    // }, 0)
    // Promise.resolve().then(() => {
    //   console.log('promise1')
    // })
    // a1()
    // let promise2 = new Promise((resolve) => {
    //   resolve('promise2.then')
    //   console.log('promise2')
    // })
    // promise2.then((res) => {
    //   console.log(res)
    //   Promise.resolve().then(() => {
    //     console.log('promise3')
    //   })
    // })
    // console.log('script end')

    //scriptstart     a1 start      a2     promise2      script end
    //promise1     a1 end          promise2.then    promise3    setTimeout


    // setTimeout和setInterval是同时插入进去的，
    // setTimeout要等时间，所有让setInterval轮询执行
    // 当setTimeout要执行后，不管setInterval已经插入事件队列多少次，都会被销毁

    // setTimeout(function () {
    //   console.log('setTimeout')
    // // }, 10)
    // console.time('timer')
    // let timer = setInterval(function () {
    //   console.time('aaa')
    //   let a = 1;
    //   for (let i = 0; i < 300000000; i++) {
    //     ++a;
    //   }
    //   console.timeEnd('aaa')
    // }, 100)
    // setTimeout(function () {
    //   clearInterval(timer);
    //   console.timeEnd('timer')
    // }, 1000)
    // console.time('bbb')
    // let a = 1;
    // for (let i = 0; i < 1000000000; i++) {
    //   ++a;
    // }
    // console.timeEnd('bbb')
    // console.time('aaa')
    // let a;
    // for (let i = 0; i < 300000000; i++) {
    //   ++a;
    // }
    // clearInterval(timer);
    // console.timeEnd('aaa')

    // function test() {
    //   console.log(arguments);
    //   const args = Array.prototype.slice.call(arguments);
    //   console.log(args);
    // }
    // test(1, 2, 3);
    for (let i = 0; i < 2000; i++) {
      (function () {
        console.log(i)
      })()
    }
    setTimeout(function () {
      console.log(111)
    }, 0)
  </script>
</body>

</html>